import React, { useContext, useEffect, useRef, useState } from "react";
import './sub.component.css';
import TestAComponent from "./test-a/test-a.component";
import { GLOBAL } from "../../../app.component";
import { InnerMqClient } from "../../../rx/client/inner-mq.client";
import { Topic } from "../../../rx/topic";

const SubComponent: React.FC = () => {

	const [isShow, setIsShow] = useState(true);

	const global = useContext(GLOBAL);
	const client = useRef<InnerMqClient>();

	useEffect(() => {
		client.current = global.innerMqService.createClient();
		client.current.sub(Topic.MY_TP_1, (res) => {
			console.log(res);
		});
		return () => {
			client.current && global.innerMqService.destroyClient(client.current);
		};
	}, []);

	return (
		<div className="container-sub">
			<div className="name-sub">
				sub component
			</div>
			<div className="comp-test-a">
				{isShow ? (<TestAComponent></TestAComponent>) : ''}
			</div>
			<button className="control-btn" onClick={() => {
				setIsShow(!isShow)
			}}>
				test-a的显示与隐藏
			</button>
		</div>
	);
}

export default SubComponent;
